<template>
  <div>
    <div class="content">
      <div class="header">
        <div class="header-left">
          <img @click="sidebarShow = !sidebarShow" class="menu cp" src="@/static/1.png" mode="" />
          <div class="logo">
            <img class="logo-img" src="@/static/16.png" mode="" />
          </div>
          <div class="big-bth cp" @click="BigEvents = true"><text>{{ $t('big') }}</text></div>
        </div>
        <div class="header-right-con">
          <div class="localeChange" @click="onLocaleChange">
            <img class="language cp" src="@/static/language.png" mode="" />
            <text>{{ $t('language') }}</text>
          </div>
          <div v-if="hasAddress || userAddress" class="header-right cp" @click="handleDisconnect">
            <span v-if="userAddress">{{ centerEllipsis(userAddress) }}</span>
            <span v-else>{{ centerEllipsis(hasAddress) }}</span>
          </div>
          <div v-else class="header-right cp" @click="handleWalletConnect">{{ $t('connect')
          }}</div>
        </div>
      </div>
      <Sidebar :sidebarShow="sidebarShow" @closure="closure" @invite="invite" class="sidebar"></Sidebar>
      <div class="chain-top">
        <img v-if="$i18n.locale == 'en'" class="text-img" src="@/static/2.png" mode="" />
        <img v-else class=" text-img" src="@/static/2-1cn.png" mode="" />
        <img class=" user-img" src="@/static/user.png" mode="" />
      </div>
      <div class=" chain-intro">
        <div class="intro-text">{{ $t('introduce') }}</div>
        <div class="intro-text">{{ $t('introduce1') }}</div>
        <div class="intro-text">{{ $t('introduce2') }}</div>
        <div class="roadmap">{{ $t('path') }}</div>
        <div class="intro-text">{{ $t('target') }}</div>
        <div scroll-y="true" class="scroll-con">
          <div class="line"></div>
          <div class="scroll-item" v-for="(item, index) in scrollArr" :key="index">
            <text class="item-per">{{ item.per }}%</text>
            <text class="item-text">{{ item.text }}</text>
          </div>
        </div>
        <div class="address-text">{{ $t('RNDAddrsss') }}： 0x1c7e83f8c581a967940dbfa7984744646ae46b29</div>
      </div>
      <div class="user-list">
        <div class="user-item" v-for="(val, i) in userList" :key="i">
          <div class="item-logo">
            <img class="img" src="@/static/16.png" mode="" />
          </div>
          <div class="user-con">
            <div class="swiper-con">
              <swipe class="swiper my-swipe" :autoplay="3000"  lazy-render :initial-swipe="0" indicator-color="white" :circular="true"
               >
                <swipe-item v-for="(item, index) in val.imgs" :key="index">
                 <img  :src="item" mode="" />
                </swipe-item>
              </swipe>
            </div>
            <div class="user-con-right" :class="{ 'right7': i == 6 }">
              <div class="title">{{ val.title }}</div>
              <div class="right-info" v-if="i == 0" :class="$i18n.locale === 'en'? '': 'right-cn-18'">
                <div class="right-item">{{ $t('supply') }}: 10000</div>
                <div class="right-item">{{ $t('consume') }}: 450000000 RND</div>
                <div class="right-item">{{ $t('function') }}: {{ $t('Redeemable') }} {{$i18n.locale === 'en'?'200M $RND':'200000000 RND'}}</div>
                <div class="right-item">{{ $t('function') }}: {{ $t('canGrow') }}</div>
                <div class="right-item">{{$t('oneAddr8')}}</div>
              </div>
              <div class="right-info" v-if="i == 1" :class="$i18n.locale === 'en'? 'right-cn-18': 'right-cn-18'">
                <div class="right-item">{{ $t('supply') }}: 10000</div>
                <div class="right-item">{{ $t('price') }}: 0.013ETH</div>
                <div class="right-item">{{ $t('get') }}: {{ $t('eachA') }}</div>
                <div class="right-item">{{ $t('function') }}: {{ $t('growingFuel') }}</div>
                <div class="right-item"> {{$t('oneAddr10')}}</div>
              </div>
              <div class="right-info right2-6" v-if="i == 2" :class="$i18n.locale === 'en'? '': 'right-cn-12'">
                <div class="right-item">{{ $t('supply') }}: {{ $t('iteminfo4-1') }}</div>
                <div class="right-item">{{ $t('burn') }}: {{ $t('aSheet') }}</div>
                <div class="right-item">{{ $t('burn') }}: {{ $t('iteminfo4-3') }}</div>
                <div class="right-item">{{ $t('function') }}: {{ $t('Redeemable') }}{{$i18n.locale === 'en'?' 300M $RND':'300000000 RND'}}</div>
                <div class="right-item">{{ $t('function') }}: {{ $t('iteminfo4-4') }}</div>
                  <div class="right-item">{{ $t('function') }}: {{ $t('iteminfo-gram') }}</div>
                <div class="right-item">{{ $t('function') }}: {{ $t('canGrow') }}</div>
                <div class="right-item">{{ $t('function') }}: {{ $t('iteminfo4-5') }}</div>
              </div>
              <div class="right-info" v-if="i == 3" :class="$i18n.locale === 'en'? 'right-cn-18': 'right-cn-18'">
                <div class="right-item">{{ $t('supply') }}: ???</div>
                <div class="right-item">{{ $t('burn') }}: ?00000000 RND</div>
                <div class="right-item">{{ $t('function') }}:{{ $t('iteminfo5-1') }}</div>
              </div>
              <div class="right-info" v-if="i == 4" :class="$i18n.locale === 'en'? 'right-cn-18': 'right-cn-18'">
                <div class="right-item">{{ $t('supply') }}: ???</div>
                <div class="right-item">{{ $t('burn') }}: {{ $t('iteminfo6-1') }}</div>
                <div class="right-item">{{ $t('burn') }}: {{ $t('iteminfo6-2') }}</div>
                <div class="right-item">{{ $t('property') }}: ???</div>
                <div class="right-item">{{ $t('function') }}: {{ $t('iteminfo6-3') }}</div>
              </div>
              <div class="right-info" v-if="i == 5" :class="$i18n.locale === 'en'? 'right-cn-18': 'right-cn-18'">
                <div class="right-item">{{ $t('burn') }}: ?00000000 RND</div>
                <div class="right-item">{{ $t('function') }}: ?</div>
              </div>
              <div class="right-info right2-6-6" v-if="i == 6" :class="$i18n.locale === 'en'? '': 'right-cn-12'">
                <div class="right-item">{{ $t('supply') }}:{{ $t('iteminfo8-1') }}</div>
                <div class="right-item">{{ $t('burn') }}: {{ $t('iteminfo8-2') }}</div>
                <div class="right-item">{{ $t('burn') }}: {{ $t('iteminfo8-3') }}</div>
                <div class="right-item">{{ $t('function') }}: {{ $t('Redeemable') }} {{$i18n.locale === 'en'?'350M $RND':'350000000 RND'}}</div>
                <div class="right-item">{{ $t('function') }}: {{ $t('iteminfo8-4') }}</div>
                <!-- <div class="right-item">{{ $t('function') }}: {{ $t('iteminfo-Game3') }}</div> -->
                <div class="right-item">{{ $t('function') }}: {{ $t("Spacecraft-airdrop") }}</div>
                <div class="right-item">{{ $t('function') }}: {{ $t("Land-airdorp") }}</div>
                <div class="right-item">{{ $t('function') }}: {{ $t('canGrow') }}</div>
                <div class="right-item">{{ $t('function') }}: {{ $t('iteminfo4-5') }}</div>
              </div>
              <div class="right-info" v-if="i == 7" :class="$i18n.locale === 'en'? 'right-en-18': 'right-cn-18'">
                <div class="right-item">{{ $t('burn') }}: ?</div>
                <div class="right-item">{{ $t('function') }}: ?</div>
              </div>
            </div>
          </div>
          <div class="quantity">
            <QuantityStatistics :row="val" v-if="val.type == 1" :canMintHorse="canMintHorse" :canMintBoy="canMintBoy"
              @subBtn="$evnet => subfun($evnet, i, item)" @addBtn="$evnet => addfun($evnet, i, item)" :isChange="isChange">
            </QuantityStatistics>
          </div>
          <Loading v-if="loadingMint && handleIndex===i" class="btn" color="#EDF90B">Minting...</Loading>
          <div   @click="goMint(val, i)" v-else class="btn cp"  :class="{ 'active-btn ': i > 1 }">
             <div v-if="!isStart && (i ===0|| i===1)"><span v-if="timeObj&&timeObj.d">{{timeObj.d}}d </span>{{ timeObj.h }}: {{timeObj.m}} : {{timeObj.s}}</div>
             <div v-else>{{ val.btnText }}</div>
            </div>
        </div>
        </div>
        <div class="upData-more">
            {{$t('UpDataMore')}}
          </div>
      </div>
    <div class="invite-box" v-if="inviteShow">
      <div class="invite-con">
        <img class="close-btn" src="@/static/colse.png" @click="inviteShow = false" mode="" />
        <div class="descri">
         <p> {{$t('descriInvite1')}}</p>
         <p> {{$t('descriInvite2')}}</p>
        </div>
        <!-- <text class="btn cp" @click="binding">{{ $t('bind') }}</text> -->
        <div class="invite-item youLink">
          <div>{{ $t('youLink') }}: <text class="youLink-text">{{ sharelink }}</text></div>
        </div>
        <div class="btn-list">
          <text class="btn cp" @click="handleGenerate(true)">{{ $t('generate') }}</text>
          <img class="copy-btn cp" src="@/static/copy.png" @click="copy(sharelink)" mode="" />
        </div>
        <div class="invite-item">
          <text class="youLink">{{ $t('MyInvitee') }}: <span  class="youLink-text">{{inviteInput}}</span></text>
        </div>
      </div>
    </div>
    <div class="big-box" v-if="BigEvents">
      <div class="big-con">
        <img class="close-btn" src="@/static/colse.png" @click="BigEvents = false" mode="" />
       <div class="bit-title">
        {{$t('big')}}
       </div>
       <div class="big-contaner">
        <div class="big-content" v-for="(keyword, index) in 15" :key="index">
          <p>{{$t("BigEventsText" + (index+1))}}<span class="widte" v-if="index+1===4">{{$t('BigEventsWidte')}}</span></p>
        </div>
        <div class="upData-dilog">
            {{$t('UpDataMore')}}
          </div>
       </div>
      </div>
    </div>
  </div>
</template>
<script setup >
import { computed, ref, getCurrentInstance, onMounted, reactive,unmount } from 'vue'
import { useRouter } from 'vue-router'
import Sidebar from '@/components/sidebar.vue'
import QuantityStatistics from '@/components/quantityStatistics.vue'
import { Swipe, SwipeItem,Loading } from 'vant'
// import Web3, { utils } from 'web3'
import useWallet from '../hooks/useWallte'
import { encrypt, decrypt } from "../utils/cryptoJS"

import { USDT_API } from '../web3/abis'
import { USDT_ADDRESS } from '../web3/config'
const { proxy, ctx } = getCurrentInstance()
import moment from 'moment'
import { Toast } from 'vant'
const _this = ctx


const {
  canMintAmount,
  onConnect,
  connected,
  web3,
  userAddress,
  chainId,
  networkId,
  canMintBoy,
  canMintHorse,
  resetApp,
  assets,
  onMintTest,
  getAccountAssets,
  onMintTest2,
  transferByExternal,
  isChange,
  loadingMint,
} = useWallet()
  import useClipboard from 'vue-clipboard3';
  const { toClipboard } = useClipboard();

const commonAddrss = '0xDf4B32D3aC81f8E6B248955E9742F55c5E522b1c'

const scrollArr = computed(() => {
  return [
    { per: 10, text: _this.$t('percentage10') },
    { per: 20, text: _this.$t('percentage20') },
    { per: 30, text: _this.$t('percentage30') },
    { per: 40, text: _this.$t('percentage40') },
    { per: 50, text: _this.$t('percentage50') },
    { per: 60, text: _this.$t('percentage60') },
    { per: 70, text: _this.$t('percentage70') },
    { per: 80, text: _this.$t('percentage80') },
    { per: 90, text: _this.$t('percentage90') },
    { per: 100, text: _this.$t('percentage100') }
  ]
}
)
onMounted(() => {
  interval.value = null
  console.log('jjjj')
  checkCode()
  handleWalletConnect()
  // const time = moment('2022-08-20 01:04:00').add(1, 'days');
  // const time = moment('2022-08-20').add(1, 'days');
  // const time = moment('2022-08-26 20:00:00')
  // const timestamp = moment(time).valueOf()
  // setCountdownTime(timestamp)
 
})


const state = reactive({
  checkList: {}
})
const userList = computed(() => {
  return [
    {
      type: 1,
      btnType: 1,
      btnText: _this.$t('cast'),
      title: _this.$t('listName1'),
      imgs: [require('@/static/4-1.png'), require('@/static/4-2.png'), require('@/static/4-3.png'), require('@/static/4-4.png'), require('@/static/4-5.png')]
    },
    // {
    // 	type:2,
    // 	btnType:2,
    // 	btnText:this.$t('removePledge'),
    // 	title:this.$t('listName2'),
    // 	imgs:[require('@/static/3.png')]
    // },
    {
      type: 1,
      btnType: 3,
      btnText: _this.$t('cast'),
      title: _this.$t('listName3'),
      imgs: [require('@/static/3-1.jpeg'), require('@/static/3-2.jpeg')]
    },
    {
      type: 2,
      btnType: 3,
      btnText: _this.$t('cast'),
      title: _this.$t('listName4'),
      imgs: [require('@/static/horse.png')]
    },
    {
      type: 2,
      btnType: 3,
      btnText: _this.$t('cast'),
      title: _this.$t('listName5'),
      imgs: [require('@/static/9.png')]
    },
    {
      type: 2,
      btnType: 3,
      btnText: _this.$t('cast'),
      title: _this.$t('listName6'),
      imgs: [require('@/static/horse-1.png')]
    },
    {
      type: 2,
      btnType: 3,
      btnText: _this.$t('cast'),
      title: '???',
      imgs: [require('@/static/9.png')]
    },
    {
      type: 2,
      btnType: 3,
      btnText: _this.$t('cast'),
      title: _this.$t('listName8'),
      imgs: [require('@/static/horse-2.png')]
    },
    {
      type: 2,
      btnType: 3,
      btnText: _this.$t('cast'),
      title: _this.$t('listName9'),
      imgs: [require('@/static/9.png')]
    },
  ]
})

const handleWalletConnect = async () => {
  await onConnect()
  if (connected) {
    const info = {
      connected: connected.value,
      userAddress: userAddress.value,
      chainId: chainId.value,
      networkId: networkId.value,
      assets: assets.value
    }
    canMintAmount()
    handleGenerate()
    const b = JSON.parse(JSON.stringify(info))
    localStorage.setItem('walletInfo', encrypt(JSON.stringify(b)))
    console.log('afterConnectdWallet', info, connected)
    console.log('afterConnectdWallet', connected._object)
  }
}
const handleDisconnect = () => {
  resetApp()
  hasAddress.value = ''
  localStorage.removeItem('walletInfo')
  Toast(_this.$t('DisconnectWallet'))
}
const contract = computed(
  () => new web3.value.eth.Contract(USDT_API, USDT_ADDRESS),
)
function approve() {
  return contract.value.methods
    .approve(USDT_ADDRESS, utils.toHex(utils.toWei('1000000000000000000000000000', 'gwei')))
    .send({ from: userAddress.value })
}

let sidebarShow = ref(false)
let inviteShow = ref(false)
let sharelink = ref('')
let inviteInput = ref('')
let hasAddress = ref('')
let handleIndex= ref(null)
let interval= ref(null)
let BigEvents = ref(false)
let isStart = ref(true)
let timeObj = ref({})

const onLocaleChange = () => {
  let language_key = localStorage.getItem('language_key')
  let value
  if (language_key) {
    value = language_key == 'en' ? 'cn' : 'en'
  } else {
    value = 'cn'
  }
  localStorage.setItem('language_key', value)
  _this.$i18n.locale = value
}
const closure = (param) => {
  sidebarShow.value = param
}
// 
const invite = (param) => {
  inviteShow.value = param

}
const getQueryString = (name) => {
  let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i")
  let r = window.location.search.substr(1).match(reg)
  if (r != null) {
    return decodeURIComponent(r[2])
  };
  return null
}
const addfun = (param, index, row) => {
  state.checkList[index] = param

}
const subfun = (param, index, row) => {
  state.checkList[index] = param
}
const handleGenerate = (type) => {
  console.log('chainId==')
  console.log(chainId.value)
  const info = localStorage.getItem('walletInfo')
  if (info) {
    const ecInfo = decrypt(info)
    const { userAddress } = JSON.parse(ecInfo)
    console.log('userAddress====')
    console.log(userAddress)
    hasAddress.value = userAddress
    sharelink.value = 'http://randomdaonft.com/?code=' + userAddress
  }
  if (type) {
    Toast(_this.$t('BuildSucceeded'))
  }
}
const checkCode = () => {
  const linkCode = getQueryString('code')
  console.log('code')
  if (linkCode) {
    localStorage.setItem('inviteCode', linkCode)
  } else {
   localStorage.setItem('inviteCode', commonAddrss)
  }
  console.log(linkCode)
  const code = localStorage.getItem('inviteCode')
  console.log('codsasasaase')
  console.log(code)
  inviteInput.value = code
}
const copy = async () => {
  const info = localStorage.getItem('walletInfo')
  if (!info) {
    Toast(_this.$t('connectwallet'))
    return
  }
  const ecInfo = decrypt(info)
  const { userAddress } = JSON.parse(ecInfo)
  console.log('userAddress====')
  console.log(userAddress)
  const link = 'http://randomdaonft.com/?code=' + userAddress
  try {
      await toClipboard(link);
      Toast(_this.$t('Replication'))

    } catch (e) {
      console.log(e);
    }
 
}
const binding = () => {
  localStorage.setItem('inviteCode', inviteInput.value)
  Toast(_this.$t('Binding'))
}

const goMint = async (row, i) => {
  handleIndex.value  = i
  console.log('row, i====')
  console.log(row, i)
  if (!isStart.value) return
  const amount = state.checkList[i]
  if (row.type === 2) return
  if (!amount) {
    return Toast(_this.$t('addQuantity'))
  }

  if (hasAddress.value || userAddress.value) {
    await handleWalletConnect()
    if (row.btnType === 1) {
      if (amount < 1) {
        Toast(_this.$('addQuantity'))
      }
      const address = localStorage.getItem('inviteCode')

      console.log('address=====')
      console.log(address)
     loadingMint.value = true
     await onMintTest(amount, address ? address : commonAddrss)
    } else {
      loadingMint.value = true
      onMintTest2(amount)
    }
  } else {
    Toast(_this.$t('connectwallet'))
  }
}
// 字符串中间显示省略号
const centerEllipsis = (str, num = 2) => {
  if (str) {
    // 字符串长度不够则不处理
    if (str.length > num * 2) {
      const firstStr = str.substr(0, num)
      const lastStr = str.substr(-num, num)
      return firstStr + '...' + lastStr
    } else {
      return str
    }
  }
}

const  countdownMe = (endTime, startTime) =>{
    const currentTime = startTime || moment().valueOf()
    const time = moment(endTime).diff(currentTime)
    if (time <= 0) {
        return false
    }
    const t = time / 1000;
    const d = Math.floor(t / (24 * 3600))
        // 保留天数后的小时
    const h = Math.floor((t - 24 * 3600 * d) / 3600)
    const m = Math.floor((t - 24 * 3600 * d - h * 3600) / 60);
    const s = Math.floor((t - 24 * 3600 * d - h * 3600 - m * 60));
    return {
        d,
        h,
        m,
        s
    }
  }

  const countdownTime = (time) => {
    const res = countdownMe(time)
      if (!res) {
        isStart.value = true
        clearInterval(interval.value)
        return
      }
      let d = ''
      if (res.d) {
       d = (timeValue(res.d) + '')

      }
      const h = (timeValue(res.h) + '')
      const m = (timeValue(res.m) + '')
      const s = (timeValue(res.s) + '')
      console.log('timeObj=====')
      console.log(res)
      timeObj.value = {d:d,h: h, m:m,s:s}
  }
  const setCountdownTime = (time) => {
    if (interval.value) {
      clearInterval(interval.value)
    }
    countdownTime(time)
    interval.value = setInterval(() => {
        countdownTime(time)
    }, 1000)
  }
  const timeValue= (val)=> {
        if (val < 10) return '0' + val
        return val
    }
//   unmount(() => {
//   clearInterval(interval.value);
//   interval.value = null
// })
</script>

<style lang="scss">
.cp {
  cursor: pointer;
}

.action {
  margin-top: 200px;
}

.header {
  height: 62px;
  width: 94%;
  background-color: #059EA3;
  display: flex;
  justify-content: space-between;
  padding: 0 3%;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 102;

  .header-left {
    display: flex;
    align-items: center;

    .menu {
      width: 40px;
      height: 45px;
    }

    .logo {
      width: 25px;
      height: 25px;
      margin-left: 10px;

      .logo-img {
        width: 25px;
        height: 25px;
        border: 2px solid #90CAA1;
        border-radius: 20px;
      }
    }
  }

  .header-right {
    font-size: 15px;
    text-align: center;
    color: #f5f5f5;
    border-radius: 15px;
    line-height: 40px;
    background-color: #FB8DD4;
    height: 45px;
    width: 95px;
  }

  .header-right-con {
    display: flex;
    align-items: center;
    color: #fff;

    .localeChange {
      display: flex;
      align-items: center;
      margin-right: 18px;
    }
  }

  .language {
    width: 25px;
    height: 25px;
    margin-right: 3px;
  }
}

.sidebar {
  position: fixed;
  top: 60px;
  left: 0;
  z-index: 101;
}

.chain-top {
  padding-top: 62px;
  height: 364px;
  background-color: #71C9F9;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;

  .text-img {
    width: 280px;
    height: 119px;
    margin-top: 20px;
    margin-left: 62px;
  }

  .user-img {
    width: 160px;
    height: 240px;
    display: inline-block;
    overflow: hidden;
    position: relative;
  }
}

.chain-intro {
  background: #059EA3;
  padding-bottom: 15px;

  .intro-text {
    padding: 10px 20px;
    color: #B2EEF1;
    line-height: 25px;
    text-indent: 15px;
    font-size: 13px;

    .rnd {
      color: #D1FE86;
      margin: 0 10px;
    }
  }

  .roadmap {
    color: #F1FEFE;
    font-size: 16px;
    font-weight: bold;
    margin-left: 10px;
  }

  .scroll-con {
    border: 5px solid #068C91;
    height: 150px;
    width: 94%;
    margin-left: 2%;
    margin-bottom: 20px;
    overflow-y: auto;
    position: relative;

    .line {
      height: 1px;
      width: 96%;
      margin-left: 5px;
      background-color: #fff;
      position: absolute;
      top: 24px;
    }

    .scroll-item {
      font-size: 15px;
      color: #000;
      padding: 0 5px;
      margin-top: 15px;
      display: flex;
      align-items: flex-start;

      .item-per {
        color: #C5F387;
        display: inline-block;
        width: 12%;
      }

      .item-text {
        display: inline-block;
        width: 88%;
      }
    }
  }
}

.user-list {
  background-color: #69C4F9;
  padding-top: 40px;
  padding-bottom: 50px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  &::after {
    content: '';
    width: 30%;
  }

  .user-item {
    height: 245px;
    width: 340px;
    border-radius: 20px;
    border: 5px solid #029A9D;
    background-color: #76CFD5;
    padding: 0 10px;
    padding-right: 0;
    position: relative;
    margin-bottom: 40px;

    .item-logo {
      width: 30px;
      height: 30px;
      position: absolute;
      top: -20px;
      left: 45%;

      .img {
        width: 30px;
        height: 30px;
        border: 3px solid #0299a6;
        border-radius: 20px;
      }
    }

    .user-con {
      display: flex;
      justify-content: space-between;
      margin-top: 15px;

      .swiper-con {
        width: 130px;
        height: 130px;
        border-radius: 20px;
        overflow: hidden;
        border: 4px solid #0299A6;
        transform: translateY(0);

        .my-swipe {
          width: 130px;
          height: 130px;
        }
        img {
          width: 130px;
          height: 130px;

        }

        .get-con {
          position: absolute;
          top: 56px;
          left: 20px;
          z-index: 1;
        }

        .get {
          font-size: 40px;
          font-weight: bold;
        }

        .num {
          display: flex;
          align-items: center;
          margin-top: 20px;
          font-size: 14px;
          font-weight: bold;
        }

        .getimg {
          width: 15px;
          height: 15px;
          margin-left: 4px;
        }
      }

      .user-con-right {
        flex: 1;
        margin-top: 10px;
        font-size: 14px;

        .title {
          font-size: 15px;
          font-weight: bold;
          margin-bottom: 5px;
          text-align: center;
        }

        .right-info {
          // margin-left: 18px;
          font-size: 12px;

          .right-item {
            word-break: normal;
            font-size: 12px;
            // white-space: nowrap;
            transform: scale(0.93);
            -webkit-transform: scale(0.96);
            margin-left: 3px;
          }
        }
        .right-cn-12 {
           margin-left: 12px;
        }
        .right-cn-18 {
          margin-left: 18px;
        }

        .right-en-18 {
          margin-left: 18px;
        }
      }

      .right7 {
        margin-top: 0;
      }
    }

    .quantity {
      margin-top: 14px;
      display: flex;
      justify-content: center;
    }

    .btn {
      width: 190px;
      height: 45px;
      color: #EDF90B;
      font-size: 17px;
      font-weight: bold;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 20px;
      background: #03989E;
      position: absolute;
      left: 75px;
      bottom: 5px;
    }

    .active-btn {
      color: #A6A6A6;
    }
  }
}

.invite-box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 200;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  .descri {
    line-height: 12px;
    font-size: 14px;
    color: #edf90b;
  }
  .invite-con {
    min-height: 197px;
    width: 327px;
    border-radius: 20px;
    border: 5px solid #029A9D;
    background-color: #76CFD5;
    padding: 0 15px;
    position: relative;
    padding: 25px 22px;
    padding-bottom: 20px;
    .btn-list {
      display: flex;
      align-items: center;
    }

    .close-btn {
      width: 31px;
      height: 31px;
      position: absolute;
      top: 0;
      right: 0;
    }

    .copy-btn {
      width: 40px;
      height: 40px;
      margin-left: 42px;
    }

    .invite-item {
      display: flex;
    }

    .invitee-input {
      border: 2px solid #279491;
      padding: 2px 4px;
      width: 190px;
      margin-left: 10px;
    }

    .btn {
      padding: 0 10px;
      color: #fff;
      background-color: #069EA3;
      border-radius: 13px;
      display: inline-block;
      height: 39px;
      line-height: 36px;
      font-size: 14px;
      margin-top: 20px;
      margin-left: 124px;
      word-break: normal;
      width: auto;
    }
  }

  .youLink {
    margin-top: 20px;
    word-break: break-all;

    .youLink-text {
      color: #fff;
      margin-left: 10px;
      font-size: 16px;
    }
  }
}
.big-box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 200;
  display: flex;
  justify-content: center;
  margin-top: 80px;
  font-size: 18px;
 
  .close-btn {
    width: 31px;
    height: 31px;
    position: absolute;
    top: 4px;
    right: 2px;
  }
  .big-con {
    width: 318px;
     height: 542px;
    border-radius: 20px;
    border: 5px solid #029A9D;
    background-color: #76CFD5;
    padding: 0 14px;
    position: relative;
    padding-top: 6px;
    padding-bottom: 20px;
  }
  .big-contaner {
    overflow-y: auto;
    height: 510px;
  }
  .big-content {
    p {
      font-size: 14px;
      word-break: break-word;
    }
  }
  .bit-title {
    font-size: 24px;
    color: #fff;
    text-align: center;
  }
}
.big-bth {
    font-size: 14px;
    margin-left: 14px;
    color: #fff;
}
.address-text {
    padding: 0 20px;
    color: #fff;
    font-size: 13px;
}
.upData-more {
  height: 100px;
  background-color: #69C4F9;
  text-align: center;
}
.upData-dilog {
  padding: 12px;
  height: 5px;
  text-align: center;
}
.widte {
  font-size: 14px;
  color: #fff;
  word-break: break-word;
}
</style>

<style>
.van-swipe-item {
  /* width: 100%; */
  /* overflow:hidden; */
  /* border-radius: 20px;
  transform: translateY(0); */
}
</style>
